<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style type="text/css">
    	/*== base style ==*/
			article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block; margin:0; padding:0;}
			body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, li, img,div,a,span,em,i{padding: 0;margin: 0;border: none;}
			ul,li {list-style: none;}
			h1, h2,h3,h4, h5, h6{font-weight:normal;}
			body{font-family:'Microsoft Yahei',arial,'Hiragino Sans GB',Simsun,sans-serif;font-size: 12px;}
			.clearfix:after {content:"";height:0;display:block;clear:both;}
			.clearfix {zoom:1;}
			img{vertical-align:top;}
			a img{border:0px;}
			a,a:hover,ins{ text-decoration:none;}
			area{ outline:none}
			.width990{width: 990px; margin: 0px auto;}

			.wrap{width:900px; margin: 20px auto;}
			/*border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。(separate	默认; collapse: 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。)*/
			/*word-break 属性规定自动换行的处理方法。(normal	使用浏览器默认的换行规则。 break-all	允许在单词内换行。 keep-all	只能在半角空格或连字符处换行。)*/
			/*white-space 属性设置如何处理元素内的空白。
				normal	默认。空白会被浏览器忽略。
				pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
				nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
				pre-wrap	保留空白符序列，但是正常地进行换行。
				pre-line	合并空白符序列，但是保留换行符。*/
			/*text-overflow 属性规定当文本溢出包含元素时发生的事情。(clip	修剪文本。 ellipsis	显示省略符号来代表被修剪的文本。 string	使用给定的字符串来代表被修剪的文本。)*/
			.tableCSS table{
				width: 100%;
				border-collapse: collapse;
				word-break: keep-all;
				white-space: nowrap;
			}
			.tableCSS td{
				border: 1px solid #e2e7e9;
				padding: 15px 30px 15px 15px;
				box-sizing: border-box;
			}
    </style>
</head>

<body>
	<div class="wrap">
		<table class="tableCSS">
		    <tbody class="moreLine">
		        <tr>
		            <td class="listTitle">年龄</td>
		            <td class="listText">25</td>
		            <td class="listTitle">性别性别</td>
		            <td class="listText">女</td>
		        </tr>
		        <tr>
		            <td class="listTitle">生日日期</td>
		            <td class="listText">1992-03-03</td>
		            <td class="listTitle">身份证是否是有效身份证</td>
		            <td class="listText">1</td>
		        </tr>
		        <tr>
		            <td class="listTitle">身份证户籍省份</td>
		            <td class="listText">湖北省</td>
		            <td class="listTitle">身份证户籍城市</td>
		            <td class="listText">襄阳市</td>
		        </tr>
		        <tr>
		            <td class="listTitle">身份证户籍地区</td>
		            <td class="listText">谷城县</td>
		            <td class="listTitle">手机运营商</td>
		            <td class="listText">中国移动</td>
		        </tr>
		        <tr>
		            <td class="listTitle">手机归属地省份</td>
		            <td class="listText">湖北省</td>
		            <td class="listTitle">手机归属地城市</td>
		            <td class="listText">武汉市</td>
		        </tr>
		        <tr>
		            <td class="listTitle">身份证号记录天数</td>
		            <td class="listText">8</td>
		            <td class="listTitle">手机号记录天数</td>
		            <td class="listText">8</td>
		        </tr>
		        <tr>
		            <td class="listTitle">身份证最近出现时间</td>
		            <td class="listText">2017-04-08</td>
		            <td class="listTitle">手机号最近出现时间</td>
		            <td class="listText">2017-04-08</td>
		        </tr>
		        <tr>
		            <td class="listTitle">关联身份证数量</td>
		            <td class="listText">1</td>
		            <td class="listTitle">关联手机号数量</td>
		            <td class="listText">1</td>
		        </tr>
		    </tbody>
		</table>
	</div>


	<div class="wrap">
		<style type="text/css">
		.mytable {table-layout: fixed; width: 100%; border-collapse: collapse; word-break: keep-all; white-space: nowrap; }
		.mytable tr td {text-overflow: ellipsis; /* for IE */ -moz-text-overflow: ellipsis; /* for Firefox,mozilla */ overflow: hidden; white-space: nowrap; border: 1px solid; text-align: left; border: 1px solid #e2e7e9;}
		</style>
		<h3>td长度固定，内容过长，超过部分用省略号代替</h3>
		<p>table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。（注意：此样式是关键）</p>
		<br /><br /><br /><br /><br />
		<table class="mytable">  
        <tr>
            <td width="20%">测试</td>  
            <td width="80%">多余省略-----测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试123123</td>  
        </tr>  
    </table>
	</div>

	<div class="wrap">
		<style type="text/css">
			/*.table-list-wrap{overflow-x:auto; height: 306px;}*/
			.table-list-wrap table.table-new {border-collapse: collapse; word-break: keep-all; white-space: nowrap;}
			.table-list-wrap table.table-new tbody {display:block; height:80px; overflow-y:scroll; }
			.table-list-wrap table.table-new thead, 
			.table-list-wrap table.table-new tbody tr {display:table; width:100%; height: 50px; table-layout: fixed; text-align: left;}
			.table-list-wrap table.table-new thead { height: 56px; }
		</style>
		<h3>头部固定, 左右滚动条</h3>
		<p>表头固定, tbody 和 thead 的display操作</p>
		<br />
		<br />
		<br />
		<br />
		<br />
		<div class="table-wrap table-list-wrap" style="width: 600px">
			<table class="table table-new r-3x">
				<thead>
					<tr>
						<th>门店名称</th>
						<th>浏览量</th>
						<th>访客量</th>
						<th>访问次数</th>
						<th>支付单数</th>
						<th>支付订单金额</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>未知</td> <td>20</td> <td>2</td> <td>7</td> <td>0</td> <td>0</td>
					</tr>
					<tr>
						<td>未知</td> <td>20</td> <td>2</td> <td>7</td> <td>0</td> <td>0</td>
					</tr>
					<tr>
						<td>未知</td> <td>20</td> <td>2</td> <td>7</td> <td>0</td> <td>0</td>
					</tr>
					<tr>
						<td>未知</td> <td>20</td> <td>2</td> <td>7</td> <td>0</td> <td>0</td>
					</tr>
					<tr>
						<td>徐汇店</td> <td>20</td> <td>2</td> <td>7</td> <td>0</td> <td>0</td>
					</tr>
					<tr>
						<td>浦东店</td> <td>20</td> <td>2</td> <td>7</td> <td>0</td> <td>0</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>

</html>
